<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="实名认证"></u-navbar>
		<view>
			<!-- <view class="d-text-center d-font-28 d-m-t-80" style="color: #162233;font-weight: bold;">上传身份证正面</view>
			<view style="padding: 20rpx 90rpx;">
				<u-upload>
					<view class="up d-flex d-row-center"><u--image width="385rpx" height="245rpx" src="/static/image/zheng.png"></u--image></view>
				</u-upload>
			</view>

			<view class="d-text-center d-font-28 d-m-t-80" style="color: #162233;font-weight: bold;">上传身份证反面</view>
			<view style="padding: 20rpx 90rpx;">
				<u-upload>
					<view class="up d-flex d-row-center"><u--image width="385rpx" height="245rpx" src="/static/image/fan.png"></u--image></view>
				</u-upload>
			</view> -->
			
			<view class="d-p-30 box">
				<view class="d-font-32" style="font-weight: bold;color: #151C24;">验证身份证</view>
				<view class="d-m-t-20">
					<view class="d-flex d-row-between">
						<u--image width="330rpx" height="208rpx" :src="sfzzm.attachList && sfzzm.attachList[0] ? sfzzm.attachList[0] : '/static/image/zheng.png'"></u--image>
						<u--image width="330rpx" height="208rpx" :src="sfzfm.attachList && sfzfm.attachList[0] ? sfzfm.attachList[0] : '/static/image/fan.png'"></u--image>
					</view>
					<view class="d-flex u-border-bottom d-m-t-10" style="height: 80rpx;">
						<view class="d-font-28 d-m-r-30" style="color: #949AA2;">
							<text style="color: red;">*</text>
							证件姓名
						</view>
						<view class="d-flex-1"><u--input border="none" v-model="form.xm" inputAlign="right" disabled disabledColor="#fff"></u--input></view>
					</view>
					<view class="d-flex u-border-bottom" style="height: 80rpx;">
						<view class="d-font-28 d-m-r-30" style="color: #949AA2;">
							<text style="color: red;">*</text>
							公民身份号码
						</view>
						<view class="d-flex-1"><u--input border="none" v-model="form.zjhm" inputAlign="right" disabled disabledColor="#fff"></u--input></view>
					</view>
				</view>
			</view>

			<u-gap height="30rpx" bgColor="#f4f4f4"></u-gap>

			<view class="d-p-30 box d-m-t-30 d-m-b-30">
				<view class="d-font-32" style="font-weight: bold;color: #151C24;">验证身份证</view>
				<view class="d-flex d-row-center d-col-center d-p-t-32" @click="nextStep">
					<u--image v-if="isAuth && auth_photo" :src="auth_photo" width="267rpx" height="281rpx"></u--image>
					<u--image v-else src="/static/image/id.png" width="267rpx" height="281rpx"></u--image>
				</view>
				<view class="d-font-28 d-text-center d-p-t-30 d-p-b-20" style="color: #ADB4BD;">提示：点击图片前往人脸识别！</view>
			</view>

			<view class="bottom u-safe-area-inset-bottom">
				<view class="u-safe-area-inset-bottom d-flex d-row-center">
					<view style="width: 500rpx;"><u-button text="下一步" shape="circle" type="primary" @click="submit"></u-button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getNewFile as getAtta, addHaveRyxxSmrz } from '../../../common/api.js';
import { pathToBase64 } from 'image-tools';
export default {
	data() {
		return {
			sfzfm: null,
			sfzzm: null,
			form: {
				xm: '',
				zjhm: ''
			},
			isAuth: false, // 人脸比对结果 true
			auth_photo: null
		};
	},
	onLoad() {
		uni.removeStorageSync('auth_photo');
		uni.removeStorageSync('isAuth');
		let item = uni.getStorageSync('smrz');
		this.form.xm = item.xm;
		this.form.zjhm = item.zjhm;
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		getAtta({
			params: {
				ywlx: 'salary_smzgl_ryxx',
				ywbh: this.$user.ssgcxx[this.$appIndex].rybh
			}
		}).then(e => {
			console.log('附件信息',e)
			this.sfzzm = e.data.filter(item => item.attachType == 'sfzzm');
			this.sfzfm = e.data.filter(item => item.attachType == 'sfzfm');
			if (!this.sfzzm.attachList) {
				uni.$u.toast('未查询到身份证信息，请联系管理员');
			}
			// 正面
			let idcard = this.sfzzm.attachList ? this.sfzzm.attachList[0] : '';
			if (process.env.NODE_ENV != 'production') {
				idcard =
					'http://220.171.59.122:29000/test/6220a67b44228b963a3be7f2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=26RW0B0QCUAIF5H7I9JL%2F20220406%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20220406T095647Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=21bfebc079a75dfcf26cb05dfca21320005643f6bc41103015cbb317364430d3';
			}
			uni.downloadFile({
				url: idcard,
				success: e => {
					pathToBase64(e.tempFilePath).then(b64 => {
						uni.setStorageSync('idCardBase64', b64);
						uni.hideLoading();
					});
				}
			});
		});
	},
	onShow() {
		if (uni.getStorageSync('isAuth')) {
			this.isAuth = true;
			this.auth_photo = uni.getStorageSync('auth_photo');
			uni.removeStorageSync('isAuth');
		}
	},
	methods: {
		nextStep() {
			// 测试代码
			if (process.env.NODE_ENV != 'production') {
				return uni.$u.route({ url: '/pages/mine/nameAuth/nextStep' });
			}
			// end测试代码
			if (!this.sfzzm.attachList) {
				return uni.$u.toast('未查询到身份证信息，请联系管理员');
			}
			uni.$u.route({ url: '/pages/mine/nameAuth/nextStep' });
		},
		submit() {
			// #ifndef H5
			if (!this.isAuth) {
				return uni.$u.toast('请先验证身份');
			}
			// #endif
			addHaveRyxxSmrz({
				...uni.getStorageSync('smrz'),
				smrz: '02',
				createRyid: this.$user.ssgcxx[this.$appIndex].rybh
			}).then(e => {
				uni.$u.route({
					url: '/pages/mine/nameAuth/getResult'
				});
			});
		}
	}
};
</script>

<style lang="scss">
page {
	// background-color: #fbfcfc;

	.up {
		height: 346rpx;
		background: #21a5f3;
		border-radius: 10rpx;
		width: 570rpx;
	}

	.bottom {
		box-sizing: content-box;
		height: 120rpx;
		> view {
			position: fixed;
			background-color: #ffffff;
			left: 0;
			right: 0;
			bottom: 0;
			height: 120rpx;
		}
	}
}
</style>
